<template>
  <div class="component-transition p-8 h-full">
    <div class="flex flex-col md:flex-row items-start gap-6">
      <div class="w-full md:w-1/3 bg-blue-100 p-6 rounded-lg">
        <i class="fa fa-home text-6xl text-primary mb-4"></i>
        <h2 class="text-2xl font-bold mb-2">首页组件</h2>
        <p class="text-gray-600">这是网站首页内容区域，展示重要信息和快捷入口。</p>
      </div>
      <div class="w-full md:w-2/3">
        <h3 class="text-xl font-semibold mb-4">欢迎访问</h3>
        <p class="mb-4">这里是首页的主要内容区域，可以展示最新公告、活动信息或其他重要内容。</p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
          <div class="p-4 border border-gray-200 rounded-lg hover:border-primary transition-colors">
            <h4 class="font-medium">最新动态</h4>
            <p class="text-sm text-gray-600">查看系统的最新更新和公告</p>
          </div>
          <div class="p-4 border border-gray-200 rounded-lg hover:border-primary transition-colors">
            <h4 class="font-medium">快捷功能</h4>
            <p class="text-sm text-gray-600">快速访问常用功能和工具</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, defineEmits } from 'vue'

// 定义要触发的事件
const emit = defineEmits(['mounted', 'unmounted'])

onMounted(() => {
  emit('mounted', 'HomeComponent', 'mounted')
})

onUnmounted(() => {
  emit('unmounted', 'HomeComponent', 'unmounted')
})
</script>